<template>
  <div>
    <div class="gva-table-box">
      <div style="margin-bottom: 20px;">
        <el-input
          v-model="searchInfo.keyword"
          placeholder="请输入计划名称"
          style="width: 15%;margin-right: 20px;"
        />

        <el-select
          v-model="searchInfo.put_status_list"
          style="width: 15%;margin-right: 20px;"
          placeholder="请选计划投放状态"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="hugeSelectColumn"
          multiple
          clearable
          filterable
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="3"
          placeholder="请选择列"
          style="width: 500px;margin-right: 20px;"
          @change="selectHugeColumn"
        >
          <el-option
            v-for="item in hugeColumns"
            :key="item.prop"
            :label="item.label"
            :value="item.prop"
          />
        </el-select>
        <el-button
          type="primary"
          @click="search()"
        >
          查询
        </el-button>
      </div>
      <el-divider />
      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        row-key="ID"
        :data="hugeTableData"
        border
      >
        <el-table-column
          align="left"
          label="广告计划名称"
          width="250px"
          fixed="left"
        >
          <template #default="scope">
            <!-- <el-button
              link
              type="primary"
              @click="group(scope.row)"
            >
              {{ scope.row.unit_name }}
            </el-button> -->
            {{ scope.row.unit_name }}
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="广告计划ID"
          width="150px"
          prop="unit_id"
          fixed="left"
        />
        <el-table-column
          v-for="(item,index) in temHugeSelectColumn"
          :key="index"
          :width="item.width"
          align="left"
          :label="item.label"
        >
          <template #default="scope">
            <span style="margin-right: 5px;">
              {{ scope.row[item.prop] }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  getAccountData,
  getHugeInfo
} from '@/api/qmAccessTokens'
import { useRouter, useRoute } from 'vue-router'

import JSONBIG from 'json-bigint'
import { hu } from 'element-plus/es/locale'
const router = useRouter()

// =========== 表格控制部分 ===========

const hugeSelectColumn = ref([])

const temHugeSelectColumn = ref([])

const selectHugeColumn = () => {
  temHugeSelectColumn.value = []
  // 把选中的列加入到表格列中
  if (hugeSelectColumn.value.length > 0) {
    hugeSelectColumn.value.forEach(item => {
      hugeColumns.value.forEach(column => {
        if (item === column.prop) {
          temHugeSelectColumn.value.push(column)
        }
      })
    })
  } else {
    temHugeSelectColumn.value = hugeColumns.value
  }
}

const options = [
  {
    value: '1',
    label: '投放'
  },
  {
    value: '2',
    label: '暂停'
  },
  {
    value: '3',
    label: '删除'
  }
]

const page = ref(1)
const pageSize = ref(10)
const total = ref(0)

const hugeTableData = ref([])
// 格式化时间 北京时间
const isShowDate = ref(true)

const useRoutes = useRoute()

const advertiser_id = useRoutes.query.advertiser_id

const searchInfo = ref({
  advertiser_id: advertiser_id,
  page: page.value,
  page_size: pageSize.value,
  keyword: '',
  put_status_list: undefined,
  platform_id: 3,
  campaign_id: useRoutes.query.campaign_id
})

const handleCurrentChange = (val) => {
  page.value = val
  searchInfo.value.page = val
  getHugeTableData()
}

const temHugeTableData = ref([])

const showData = ref(false)
// const changeShowData = (val) => {
//   showData.value = val
//   if (val) {
//     const arr = []
//     if (activeName.value == '1') {
//       hugeTableData.value.forEach(item => {
//         if (item.cost_today > 0) {
//           arr.push(item)
//         }
//       })
//       hugeTableData.value = arr
//     } else if (activeName.value == '3') {
//       kuaishouData.value.forEach(item => {
//         if (item.cost_today > 0) {
//           arr.push(item)
//         }
//       })
//       kuaishouData.value = arr
//     }
//   } else {
//     if (activeName.value == '1') {
//       hugeTableData.value = temHugeTableData.value
//     } else if (activeName.value == '3') {
//       kuaishouData.value = temKuaishouData.value
//     }
//   }
// }

// 查询
const getHugeTableData = function() {
  getHugeInfo({ params: JSON.stringify(searchInfo.value), type: 'group' }).then(res => {
    if (res.code == 0) {
      hugeTableData.value = []
      temHugeTableData.value = []
      const info = JSONBIG.parse(res.data.info)
      total.value = info.PageInfo.total_number
      info.List.forEach(item => {
        const origin = JSONBIG.parse(item.origin)
        const obj = {
          unit_id: origin.unit_id,
          unit_name: origin.unit_name,
          status: status.value[origin.status],
          put_status: put_status.value[origin.put_status],
          day_budget: origin.day_budget,
          study_status: study_status.value[origin.study_status],
          bid: origin.bid,
          begin_time: origin.begin_time,
          end_time: origin.end_time,
          time: origin.create_time,
        }

        if (item.extend) {
          const extend = JSON.parse(item.extend)
          basicInfo.value.forEach(basic => {
            // 如果是浮点型就保留两位小数
            let props = extend[basic.prop]
            if (!Number.isInteger(props)) {
              props = props.toFixed(2)
            }

            if (basic.label.indexOf('率') > -1) {
              obj[basic.prop] = props + '%'
            } else {
              obj[basic.prop] = props
            }
          })
        }

        hugeTableData.value.push(obj)
      })
    }
  })
}

const hugeColumns = ref([
  {
    label: '广告计划状态',
    prop: 'status',
    width: '150px'
  },
  {
    label: '投放状态',
    prop: 'put_status',
    width: '150px'
  },
  {
    label: '学习期',
    prop: 'study_status',
    width: '100px'
  },
  {
    label: '出价',
    prop: 'bid',
  },
  {
    label: '投放开始时间',
    prop: 'begin_time',
    width: '150px'
  },
  // {
  //   label: '投放结束时间',
  //   prop: 'end_time',
  //   width: '200px'
  // },
  {
    label: '当日预算',
    prop: 'day_budget',
    width: '100px'
  },
  {
    label: '消耗',
    prop: 'charge'
  },
  {
    label: '曝光数',
    prop: 'aclick'
  },
  {
    label: '行为数',
    prop: 'bclick'
  },
  {
    label: '千次曝光',
    prop: 'impression_1k_cost',
    width: '100px'
  },
  {
    label: '点击单价',
    prop: 'photo_click_cost',
    width: '100px'
  },
  {
    label: '行为单价',
    prop: 'action_cost',
    width: '100px'
  },
  {
    label: '激活数',
    prop: 'activation'
  },
  {
    label: '千次曝光花费',
    prop: 'click_1k_cost',
    width: '150px'
  },
  {
    label: '激活成本',
    prop: 'click_conversion_ratio',
    width: '100px'
  },
  {
    label: '激活单价',
    prop: 'conversion_cost',
    width: '100px'
  },
  {
    label: '3日留存',
    prop: 'event_three_day_stay_by_conversion'
  },
  {
    label: '7日留存',
    prop: 'event_week_stay_by_conversion'
  },
  {
    label: '转化数',
    prop: 'conversion_num'
  },
  {
    label: '三留率',
    prop: 'event_three_day_stay_by_conversion_ratio'
  },
  {
    label: '7留率',
    prop: 'event_week_stay_by_conversion_ratio'
  },
  {
    label: '转化成本',
    prop: 'conversion_num_cost',
    width: '100px'
  },
  {
    label: '转化率',
    prop: 'conversion_ratio'
  },
  {
    label: '广告LTV',
    prop: 'minigame_iaa_purchase_amount_first_day'
  },
  {
    label: '三日LTV',
    prop: 'minigame_iaa_purchase_amount_three_day_by_conversion'
  },
  {
    label: '七日LTV',
    prop: 'minigame_iaa_purchase_amount_week_by_conversion'
  },
  {
    label: 'ROI',
    prop: 'minigame_iaa_purchase_amount_first_day_roi'
  },
  {
    label: '三日ROI',
    prop: 'minigame_iaa_purchase_amount_three_day_by_conversion_roi'
  },
  {
    label: '七日ROI',
    prop: 'minigame_iaa_purchase_amount_week_by_conversion_roi'
  },
  {
    label: '变现LTV',
    prop: 'minigame_iaa_purchase_amount'
  },
  {
    label: '变现ROI',
    prop: 'minigame_iaa_purchase_roi'
  },
])

const setColumn = () => {
  temHugeSelectColumn.value = []
  hugeColumns.value.forEach(item => {
    temHugeSelectColumn.value.push(item)
  })
}

setColumn()

// const group = (row) => {
//   console.log(row)
//   router.push({
//     name: 'qmCiliOriginality', query: { unit_id: row.unit_id, advertiser_id: advertiser_id }
//   })
// }

const basicInfo = ref(
  [
    {
      label: '消耗',
      prop: 'charge'
    },
    {
      label: '曝光数',
      prop: 'aclick'
    },
    {
      label: '行为数',
      prop: 'bclick'
    },
    {
      label: '千次曝光',
      prop: 'impression_1k_cost'
    },
    {
      label: '点击单价',
      prop: 'photo_click_cost'
    },
    {
      label: '行为单价',
      prop: 'action_cost'
    },
    {
      label: '激活数',
      prop: 'activation'
    },
    {
      label: '千次素材曝光花费',
      prop: 'click_1k_cost'
    },
    {
      label: '激活成本',
      prop: 'click_conversion_ratio'
    },
    {
      label: '激活单价',
      prop: 'conversion_cost'
    },
    {
      label: '3日留存',
      prop: 'event_three_day_stay_by_conversion'
    },
    {
      label: '7日留存',
      prop: 'event_week_stay_by_conversion'
    },
    {
      label: '转化数',
      prop: 'conversion_num'
    },
    {
      label: '三留率',
      prop: 'event_three_day_stay_by_conversion_ratio'
    },
    {
      label: '7留率',
      prop: 'event_week_stay_by_conversion_ratio'
    },
    {
      label: '转化成本',
      prop: 'conversion_num_cost'
    },
    {
      label: '转化率',
      prop: 'conversion_ratio'
    },
    {
      label: '广告LTV',
      prop: 'minigame_iaa_purchase_amount_first_day'
    },
    {
      label: '三日LTV',
      prop: 'minigame_iaa_purchase_amount_three_day_by_conversion'
    },
    {
      label: '七日LTV',
      prop: 'minigame_iaa_purchase_amount_week_by_conversion'
    },
    {
      label: 'ROI',
      prop: 'minigame_iaa_purchase_amount_first_day_roi'
    },
    {
      label: '三日ROI',
      prop: 'minigame_iaa_purchase_amount_three_day_by_conversion_roi'
    },
    {
      label: '七日ROI',
      prop: 'minigame_iaa_purchase_amount_week_by_conversion_roi'
    },
    {
      label: '变现LTV',
      prop: 'minigame_iaa_purchase_amount'
    },
    {
      label: '变现ROI',
      prop: 'minigame_iaa_purchase_roi'
    },
  ]
)

const status = ref(
  {
    '-1': '不限',
    '1': '计划已暂停',
    '3': '计划超预算',
    '6': '余额不足',
    '10': '广告组已删除',
    '11': '审核中',
    '12': '审核未通过',
    '14': '已结束',
    '15': '已暂停',
    '17': '组超预算',
    '19': '未达投放时间',
    '20': '有效',
    '22': '不在投放时段'
  }
)

const put_status = ref({
  '1': '投放中',
  '2': '暂停',
  '3': '删除',
})

const study_status = ref({
  '1': '学习中',
  '2': '学习成功',
  '3': '学习失败',
})

const search = () => {
  getHugeTableData()
}

getHugeTableData()

</script>
<style>
.el-col {
  text-align: center;
}
</style>
